<template>
  <div class="w-[100%]">
    <div class="title flex items-center justify-between">
      <div class="flex  items-center">
        <div class="mr-[15px] text-[20px]">
          销售排名
        </div>

      </div>

      <div class="flex">

        <div class="tab flex">
          <div class="tab-li flex-center cursor-pointer"
               :class="`${ activeTab1 == index ? 'active' : '' }`"
               v-for="(item,index) in tab1" :key="index"
               @click="handleBtnClick({type:'tab1',index})"
          >
            {{ item.name }}
          </div>
        </div>

        <div class="tab flex ml-[15px]">
          <div class="tab-li flex-center transition"
               @click="handleBtnClick({type:'all'})"
               style="border-left: solid 1px #E4E4E4;border-radius: 8px;"
          >
            更多
          </div>
        </div>


      </div>


    </div>

    <div class="module mt-[20px] flex justify-between w-[100%]">
      <QueryTable
        pk="id"
        :list="dataList"
        :total="0"
        :btns="[]"
        @execute="handleBtnClick"
        v-model="queryParams"
        :thead="th"
        :show-action="false"
        :show-expand="false"
        :show-section="false"
      >
        <template #avatar="{row}">
          <div class="flex items-center">
            <div class="bg avata w-[50px] h-[50px] mr-[10px]" :style="`background-image:url(${ row.headPortrait })`"></div>
            <div>{{ row.name }}</div>
          </div>
        </template>

        <template #total="{row}">
            <div>

              <div class="progress mt-[18px] w-[148px] h-[8px] bg-[#EFEFEF] rounded-[8px]" v-if="row">
                <div class="h-[8px] rounded-[8px]"
                     v-style="`background:#3721FF;width:${  ((row?.validCount/(row?.totalCount||1)) || 0)*148  }px;`">


                </div>
              </div>
            </div>
        </template>

        <template #rate="{row}">
          <div>
                {{ Math.round(((row?.validCount/(row?.totalCount||1)) || 0)*10000)/100 }}%
          </div>
        </template>

      </QueryTable>


    </div>

  </div>
</template>
<script setup lang="ts">
import QueryTable from "@/components/TableData/index.vue"

import {getSalesRank} from "@/api/home";

const activeTab1 = ref(0)
const tab1 = ref([
  {
    name: "昨日",
    value: 1
  },
  {
    name: "今日",
    value: 2
  },
  {
    name: "7天",
    value: 3
  },
  {
    name: "30天",
    value: 4
  }
])


const dataList = ref([])

const queryParams = ref({})

const th = ref([
  {
    name: '业务员',
    code: 'avatar',
    required: true
  },
  {
    name: '有效/总订单',
    code: 'total',
    required: true
  },
  {
    name: '占比',
    code: 'rate',
    required: true
  },
])

const queryData = async () => {
  let res = await getSalesRank({
    type: tab1.value[activeTab1.value].value
  });

  dataList.value = res || []
}

const handleBtnClick = e => {
  let type = e.type;
  try {
    fn[type](e)
  } catch (e) {
    console.log(`${type}不存在`)
  }
}

const fn = {
  tab1({index}){
      if(activeTab1.value!=index){
        activeTab1.value = index;
        queryData();
      }

  },
  all(){
      router.push(`/statistics/analysis/order`)
  }
}

onMounted(() => {
  queryData();
})

</script>
<style lang="scss" scoped>
.module-li {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.4);

}

:deep(.el-card__body) {
  padding: 0;
}

.tab {
  .tab-li {
    border: solid 1px #E4E4E4;
    color: #666666;
    background: #FAFAFA;
    padding: 0 20px;
    height: 36px;

    &:nth-of-type(1) {
      border-radius: 8px 0 0 8px;
    }


    &:nth-last-of-type(1) {
      border-left: solid 1px rgba(0, 0, 0, 0);
      border-radius: 0 8px 8px 0;
    }


    &.active {
      border: solid 1px #3721FF;
      color: #3721FF;
      background: #EFEEFF;
    }

  }

}
</style>
